<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	</head>
	<body>


				
			<div id="app">
				  
			       <h3>男士列表</h3>
				   <!-- <p v-for="(user,index) in userList"> {{user.name}}: {{user.gender}}</p> -->
				   <p v-for="(user,index) in maleUserList"> {{user.name}}: {{user.gender}}</p>
				   
				   <button @click="appendUser">追加</button>
				   
			</div>

		
		<script>
			let vm = new Vue({
			        el: '#app',
			        data: {
			            userList:[
							{id:1, name:'张飞', address:'河北' ,gender:'男'},
							{id:2 , name:'张飞', address:'黑龙江',gender:'女'},
							{id:3, name:'刘备', address:'荆州',gender:'女'},
							{id:4, name:'孙权', address:'荆州',gender:'男'},
						]
			        },
					//计算属性
			        computed:{
			           maleUserList(){
						  let arr = [];
						  
						  this.userList.forEach((user, index)=>{
							  if(user.gender ==='男'){
								arr.push(user)
							  }
							  
						  })
						  return arr; 
					   }
			        },
			        methods:{
						appendUser(){
							this.userList.push({id:4, name:'孙权222222', address:'荆州',gender:'男'})
						}
			        }
			    });		
		
		
		</script>

	</body>
</html>
